<template>
  <el-dialog
    :visible.sync="editFormVisible"
    width="600px"
    @close="dialogClose"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <h3 slot="title" class="tx-c">上传问诊报告</h3>
    <div class="mb20">
      <el-upload
        :before-upload="handleChange"
        :action="action"
        :auto-upload="true"
        :file-list="fileList"
        :limit="1"
        :on-remove="onRemoveFile"
        :on-success="handleSuccess"
        :accept="accept"
        :headers="headers"
      >
        <el-button size="medium" type="primary">选择文件</el-button>
      </el-upload>
    </div>
    <div class="upload-tip">
      <p>
        文件格式为
        <span v-for="(item, index) in typeLimit" :key="index" class="mr10">{{
          item
        }}</span>
      </p>
      <p>文件大小不能超过 {{ sizeLimit }} MB</p>
    </div>
    <div slot="footer" class="flex-center">
      <el-button @click="editFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitUpload" :loading="btnLoading"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { ApiPostTeamReport } from "@/api";
export default {
  components: {},
  props: {},
  data() {
    return {
      typeLimit: [".xlsx", ".xls", ".pdf", ".docx", ".doc"],
      sizeLimit: 2,
      action: this.$baseUrl + "/api/doctor/upload",
      editFormVisible: false,
      btnLoading: false,
      id: null,
      fileList: [],
      headers: {
        Authorization: "Bearer " + sessionStorage.getItem("token"),
      },
      uploadData: "",
    };
  },
  watch: {},
  computed: {
    accept() {
      return this.typeLimit.join(",");
    },
  },
  methods: {
    handleSuccess(res) {
      this.uploadData = res?.data?.path;
    },
    handleChange(file) {
      let canUpload = true; //是否可以上传
      let fileName = file.name;
      let size = file.size / 1024 / 1024 < this.sizeLimit;
      let pos = fileName.lastIndexOf(".");
      let lastName = fileName.substring(pos, fileName.length);
      if (!this.typeLimit.includes(lastName)) {
        Message({
          message: `文件格式只能是${this.typeLimit}`,
          type: "warning",
          offset: "180",
        });
        canUpload = false;
      }
      if (!size) {
        Message({
          message: `文件格式不能超过${this.sizeLimit}MB`,
          type: "warning",
          offset: "180",
        });
        canUpload = false;
      }
      return canUpload;
    },
    show(id) {
      this.id = id;
      this.editFormVisible = true;
    },
    dialogClose() {
      this.fileList = [];
      this.editFormVisible = false;
    },
    submitUpload() {
      ApiPostTeamReport({ order_id: this.id, content: this.uploadData }).then(
        (res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "上传成功!",
            });
            this.dialogClose();
          }
        }
      );
    },

    onRemoveFile(file, fileList) {
      this.fileList = fileList;
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.upload-tip {
  color: #b5b5b5;
  font-size: 12px;
  line-height: 1.4;
}
</style>
